<!DOCTYPE html>
<html xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="description" content="A fully featured admin theme which can be used to build CRM, CMS, etc.">
    <meta name="author" content="Coderthemes">
	
	<!-- jQuery-->
	<script type="text/javascript" src="/static/plugins/jquery/jquery-3.6.0.min.js"></script>
	
	<!-- layui-->
	<link rel="stylesheet" href="/static/plugins/layui/2.7.6/css/layui.css" media="all">
	<script src="/static/plugins/layui/2.7.6/layui.js" charset="utf-8"></script>
    <title>设置表单字段</title>
</head>
<body>
	<div class="layui-tab layui-tab-brief" lay-filter="filter_tab">
		<ul class="layui-tab-title">
			<li th:class="${dto.tabIndex == 1} ? 'layui-this' : '' " th:onclick="location.href='/web/sys/ysCol/toSettingForm?menuId=[[${dto.menuId}]]&tabIndex=1'">一、字段(新增)</li>
			<li th:class="${dto.tabIndex == 2} ? 'layui-this' : '' " th:onclick="location.href='/web/sys/ysCol/toSettingForm?menuId=[[${dto.menuId}]]&tabIndex=2'">二、字段(编辑)</li>
		</ul>
		<div class="layui-tab-content">
			
			<!-- 字段（总） -->
			<div class="layui-tab-item" th:classappend="${dto.tabIndex == 1} ? 'layui-show' : '' ">
			   	<form class="layui-form" id="id_form" method="post" action="/api/inter/sysMenu/threeMenuInitCol">
					<input type="hidden" name="sysMenuId" th:value="${dto.sysMenuId}">
					<div id="" style="width:99%;">
						<div id="id_col" class="demo-transfer" style="float:left;"></div>
					</div>
					<div class="layui-btn-container" style="padding-top:550px;padding-left:500px">
						<button type="button" class="layui-btn" lay-submit="" lay-filter="formSubmitCol">保存</button>
					</div>
				</form>
				<script th:inline="javascript">
				layui.use(['transfer', 'layer', 'util', 'form'], function(){
					var $ = layui.$,
						transfer = layui.transfer,
						layer = layui.layer,
						util = layui.util,
						form = layui.form;
					
					//字段设置
					transfer.render({
						elem: '#id_col',
						title: ['默认字段', '使用字段'],
						data: $.parseJSON(JSON.stringify([[${dto.colData.forSelectArr}]])),
						width: 400,
						height: 600,
						id: 'colKey',
						value: $.parseJSON(JSON.stringify([[${dto.colData.selectedArr}]]))
					})
					
					form.on('submit(formSubmitCol)', function(data){
						var indexOfLoading = layer.load(1, {
							shade: [0.5,'#000000'] //0.1透明度的白色背景
						});
						data.field['colArr'] = JSON.stringify(transfer.getData('colKey'));
						$.post(data.form.action, data.field, function(res){
							if (res.code == 0) {
								layer.msg(res.msg);
								location.reload();
							} else {
								layer.close(indexOfLoading);
								layer.msg(res.msg);
							}
						});
						return false;
					});
				});
				</script>
			</div>
			
			<!-- 字段（列表） -->
			<div class="layui-tab-item" th:classappend="${dto.tabIndex == 2} ? 'layui-show' : '' ">
			   	<form class="layui-form" id="id_form_table" method="post" action="/api/inter/sysMenu/threeMenuInitColTable">
					<input type="hidden" name="sysMenuId" th:value="${dto.sysMenuId}">
					<div id="" style="width:99%;">
						<div id="id_col_table" class="demo-transfer" style="float:left;"></div>
					</div>
					<div class="layui-btn-container" style="padding-top:550px;padding-left:500px">
						<button type="button" class="layui-btn" lay-submit="" lay-filter="formSubmitColTable">保存</button>
					</div>
				</form>
				<script th:inline="javascript">
				layui.use(['transfer', 'layer', 'util', 'form'], function(){
					var $ = layui.$,
						transfer = layui.transfer,
						layer = layui.layer,
						util = layui.util,
						form = layui.form;
					
					//字段设置
					transfer.render({
						elem: '#id_col_table',
						title: ['默认字段', '使用字段'],
						data: $.parseJSON(JSON.stringify([[${dto.colTableData.forSelectArr}]])),
						width: 400,
						height: 600,
						id: 'colTableKey',
						value: $.parseJSON(JSON.stringify([[${dto.colTableData.selectedArr}]]))
					})
					
					form.on('submit(formSubmitColTable)', function(data){
						var indexOfLoading = layer.load(1, {
							shade: [0.5,'#000000'] //0.1透明度的白色背景
						});
						data.field['colTableArr'] = JSON.stringify(transfer.getData('colTableKey'));
						$.post(data.form.action, data.field, function(res){
							if (res.code == 0) {
								layer.msg(res.msg);
								location.reload();
							} else {
								layer.close(indexOfLoading);
								layer.msg(res.msg);
							}
						});
						return false;
					});
				});
				</script>
			</div>
			
			<!-- 字段（搜索） -->
			<div class="layui-tab-item" th:classappend="${dto.tabIndex == 3} ? 'layui-show' : '' ">
			   	<form class="layui-form" id="id_form_search" method="post" action="/api/inter/sysMenu/threeMenuInitColSearch">
					<input type="hidden" name="sysMenuId" th:value="${dto.sysMenuId}">
					<div id="" style="width:99%;">
						<div id="id_col_search" class="demo-transfer" style="float:left;"></div>
					</div>
					<div class="layui-btn-container" style="padding-top:550px;padding-left:500px">
						<button type="button" class="layui-btn" lay-submit="" lay-filter="formSubmitColSearch">保存</button>
					</div>
				</form>
				<script th:inline="javascript">
				layui.use(['transfer', 'layer', 'util', 'form'], function(){
					var $ = layui.$,
						transfer = layui.transfer,
						layer = layui.layer,
						util = layui.util,
						form = layui.form;
					
					//字段设置
					transfer.render({
						elem: '#id_col_search',
						title: ['默认字段', '使用字段'],
						data: $.parseJSON(JSON.stringify([[${dto.colSearchData.forSelectArr}]])),
						width: 400,
						height: 600,
						id: 'colSearchKey',
						value: $.parseJSON(JSON.stringify([[${dto.colSearchData.selectedArr}]]))
					})
					
					form.on('submit(formSubmitColSearch)', function(data){
						var indexOfLoading = layer.load(1, {
							shade: [0.5,'#000000'] //0.1透明度的白色背景
						});
						data.field['colSearchArr'] = JSON.stringify(transfer.getData('colSearchKey'));
						$.post(data.form.action, data.field, function(res){
							if (res.code == 0) {
								layer.msg(res.msg);
								location.reload();
							} else {
								layer.close(indexOfLoading);
								layer.msg(res.msg);
							}
						});
						return false;
					});
				});
				</script>
			</div>
			<div class="layui-tab-item" th:classappend="${dto.tabIndex == 4} ? 'layui-show' : '' ">
			   	<form class="layui-form" id="id_form_button" method="post" action="/api/inter/sysMenu/threeMenuInitButton">
					<input type="hidden" name="sysMenuId" th:value="${dto.sysMenuId}">
					<div id="" style="width:99%;">
						<div id="id_button" class="demo-transfer" style="float:left;"></div>
					</div>
					<div class="layui-btn-container" style="padding-top:550px;padding-left:500px">
						<button type="button" class="layui-btn" lay-submit="" lay-filter="formSubmitButton">保存</button>
					</div>
				</form>
				<script th:inline="javascript">
				layui.use(['transfer', 'layer', 'util', 'form'], function(){
					var $ = layui.$,
						transfer = layui.transfer,
						layer = layui.layer,
						util = layui.util,
						form = layui.form;
					
					//按钮设置
					transfer.render({
						elem: '#id_button',
						title: ['默认按钮', '使用按钮'],
						data: $.parseJSON(JSON.stringify([[${dto.buttonData.forSelectArr}]])),
						width: 250, //定义宽度
						height: 500, //定义高度
						id: 'buttonKey', //定义唯一索引，用于获取数据
						value: $.parseJSON(JSON.stringify([[${dto.buttonData.selectedArr}]]))
					})
					
					form.on('submit(formSubmitButton)', function(data){
						var indexOfLoading = layer.load(1, {
							shade: [0.5,'#000000'] //0.1透明度的白色背景
						});
						data.field['buttonArr'] = JSON.stringify(transfer.getData('buttonKey'));
						$.post(data.form.action, data.field, function(res){
							if (res.code == 0) {
								layer.msg(res.msg);
								location.reload();
							} else {
								layer.close(indexOfLoading);
								layer.msg(res.msg);
							}
						});
						return false;
					});
				});
				</script>
			</div>
		</div>
	</div>
</body>
</html>